<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>

        <style>
            .dragBox {
                width: 100px;
                height: 100px;
                background-color: aquamarine;
            }

            .box {
                width: 1000px;
                height: 500px;
                border: 5px solid red;
                margin: 20px 0;
            }

            .dragBox-active {
                opacity: 0;
            }
        </style>
    </head>

    <body>
        <div class="dragBox" draggable="true"></div>

        <div class="box"></div>

        <script>
            let box = document.querySelector('.dragBox');
            let box2 = document.querySelector('.box');

            box.addEventListener('drag', function (e) {});

            box.addEventListener('dragstart', () => {});

            box.addEventListener('dragend', (e) => {});

            box2.addEventListener('dragenter', () => {});

            box2.addEventListener('dragleave', () => {});

            box2.addEventListener('dragover', (e) => {
                e.preventDefault();
            });

            box2.addEventListener('drop', (event) => {
                event.preventDefault();

                console.log('drop');

                if (targetClassName && targetClassName.contains('dragBox')) {
                    box2.appendChild(box);
                }
            });
        </script>
    </body>
</html>
